<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/mail.css">
<link type="text/css" rel="stylesheet" href="css/popup.css">
<link type="text/css" rel="stylesheet" href="css/ui.css">
<link rel="stylesheet" type="text/css" href="js/plugins/prettyPhoto/css/prettyPhoto.css" media="screen" >
<link type="text/css" rel="stylesheet" href="js/plugins/imgareaselect-0.9.10/css/imgareaselect-default.css">
<script type="text/javascript" src="js/markup.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/plugins/prettyPhoto/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.wallform.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/plugins/photoUpload/jquery.ocupload-1.1.2.js"></script>
<script type="text/javascript" src="js/plugins/imgareaselect-0.9.10/scripts/imgareaselect.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
	<script type="text/javascript" src="js/jquery.tools.js"></script>
	<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
	
<script>
$(document).ready(function()
{
	var prev_avatar;	
	
	$('input[name="crop_cancel"]').live
	(	
		'click',
		 function()
		 {			 
			 $('#photo_review').fadeOut(300);
			 $('#photo_crop').html("");
			 $('#avatar img').attr('src', prev_avatar);
			 $('#avatar img').removeAttr('style');
			 $('div[class^="imgarea"]').hide();
		 }
	);

	$('input[name="save_crop"]').live
	(	
		 'click',
		 function()
		 {			 
			 $('input[name="submit_crop"]').click();
			 saved_crop();
		 }		 
	);
	
	function saved_crop()
	{
		 $('#photo_crop').html("<p class='avatar_loaded'>Аваратка успешно сохранена</p>");
		 $('div[class^="imgarea"]').hide();
		 function hide_crop() 
		 {
			 $('#photo_review').fadeOut(300);
			 $('#photo_crop').html("");
			 clearInterval(intervalID);
		 };
		 
		 var intervalID = setInterval(hide_crop, 2000);		 
		 
	};
	
	function preview(img, selection) 
	{
		 var scaleX = 182 / (selection.width || 1);
		 var scaleY = 258 / (selection.height || 1);
	
		 $('#avatar img').css
		 ({
			 width: Math.round(scaleX * $("#photo_review img").width()) + 'px',
			 height: Math.round(scaleY * $("#photo_review img").height()) + 'px',
			 marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			 marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
		 });
    };
	
	$('#upload_photo').upload
	({
		 name: 'file',
		 method: 'post',
		 enctype: 'multipart/form-data',
		 action: 'photo_upload.php',
		 onSubmit: function()
			{
				$('#progress1').text('Отправка файла...');
				prev_avatar=$('#avatar img').attr('src');
			},
		onComplete: function(data) 
		{			 
			 if (data.indexOf('error-upload')==0)
			 {
				 alert(data.substring(data.indexOf(':')+1));
				 $('#progress1').text('');
				 return;
			 }
			
			 var url=data.substring(0,data.indexOf('width:'));
			 var width=data.substring(data.indexOf('width:')+6);
			 $('#progress1').text('');
			 $('#avatar img').attr('src', url);
			 $('#form_crop input[name="file"]').val(url);
			 $('#photo_crop').html("<img src='"+url+"'/>");
			 $('#photo_crop').width(width);
			 $('#photo_crop img').after("<p><input class='button' name='save_crop' type='button' value='Сохранить'/></p>");
			 $('#photo_crop p input').after("<input class='button' name='crop_cancel' type='button' value='Отмена'/>");
			 $('#photo_review').fadeIn(300);
			
			$('#photo_crop img').imgAreaSelect
			({
				 handles: true,
				 aspectRatio: '182:258',		
				 onSelectChange: preview,
				 onSelectEnd: function ( image, selection )
				 {

					$('input[name=x1]').val(selection.x1);
					$('input[name=y1]').val(selection.y1);
					$('input[name=x2]').val(selection.x2);
					$('input[name=y2]').val(selection.y2);
					$('input[name=w]').val(selection.width);
					$('input[name=h]').val(selection.height);
				 }
			});
		
			 $('#avatar').insertAfter($('#photo'));			
		}
	});
		

});
</script >

<title>{{site_title}}</title>
</head>
<body>
	<div id="container">
		  <div id="header">
			 <div id="logo">
			 </div>	
			 <div id="logout"><a href="#">Выйти</a>  </div>
		 </div>
		 <div class="clear"></div>
		 <div id="menu">
			 {% include 'top_menu.html' %}
		 </div>
		 <div class="main-container">
			 <div id="wrap_container">
				 <div id="column-left">
					 {% include 'left_menu_personal_data.html' %}
				 </div>
				 <div id="content">					 
					 {% include 'my_account_content.html' %}
				 </div>	
			 </div>	
		 </div>		
	</div>
	<!-- popup для редактирования личных данных -->
	{% include 'popup_edit_personal_data.html' %}	
	<!-- end popup -->
	<!-- popup для создания и редактирования фотоальбомов-->
	{% include 'popup_new_photo_album.html' %}	
	<!-- end popup -->
    <!-- popup для создания и редактирования видеоальбомов-->
	{% include 'popup_new_video_album.html' %}	
	<!-- end popup -->
	<!-- popup для подтверждения действий-->
	{% include 'popup_confirm.html' %}	
	<!-- end popup -->   
    <!-- popup для просмотра загруженного видео-->
	{% include 'popup_video_iframe.html' %}	
	<!-- end popup -->  
	<!-- popup для просмотра загруженного видео-->
	{% include 'popup_new_advert.html' %}	
	<!-- end popup --> 
<!-- popup для просмотра загруженного видео-->
	{% include 'popup_contacts.html' %}	
	<!-- end popup --> 
<!-- popup для просмотра загруженного видео-->
	{% include 'popup_message.html' %}	
	<!-- end popup -->     
	 <div id="hide-layout" class="hide-layout">
	 </div>
</body>
</html>